
/**
ref返回一个对象
{
  dep:Set(1) {ReactiveEffect},
  value: 0
}
 */
let activeEffect  = null;
class Dep{
    constructor(){
        //依赖对象的内部会保存一个副作用的集合
        this.subscribers = new Set();
    }
    depend(){
      //如果当前有活动状态的副作用的话，收集此副作用函数
      if(activeEffect){
        this.subscribers.add(activeEffect);
      }
    }
    notify(){//通知副作用执行
        this.subscribers.forEach(effect=>effect());
    }
}
function ref(rawValue){
  // 每个ref对象都会内部有一个依赖dep的实例
  const dep = new Dep();  
  return {
    get value(){
        //console.log('get value',rawValue)
        //当取值的时候，可以调用dep的depend方法收集副作用
        dep.depend();
        return rawValue;
    },
    set value(newVal){
        //console.log('set value',rawValue,newVal)
        rawValue = newVal;
        dep.notify();
    }
  }
}
function effect(fn){
  activeEffect=fn;
  fn();
  activeEffect = null;
}
const count = ref(0);
//如果在模板中使用了这个返回值 count
//给这个响应式的变量添加一个副使用
effect(()=>{
    //模拟的组件渲染函数
    console.log(count.value)
});
//添加完副作用之后，以后如果修改了value值的话，会重新执行副作用
count.value=count.value+1;

